<template>
  <div>
    <h2 style="text-align: left;">菜单管理</h2>
    <el-row>
        <el-col :span="12" style="text-align: left;">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="一级菜单">
                    <el-select v-model="queryForm.frontMenuId" placeholder="请选择一级菜单" clearable>
                    <el-option :label="menu.menuName" :value="menu.menuId" v-for="menu in originMenu" :key="menu.menuId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12" style="text-align: right;">
            <el-button type="primary" @click="addMenu">添加</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="menuId"
                label="菜单编号"
                >
                </el-table-column>
                <el-table-column
                prop="menuName"
                label="菜单名称"
                >
                </el-table-column>
                <el-table-column
                label="父级菜单"
                >
                <template slot-scope="scope">
                    {{scope.row.frontMenuName == null ? "无" : scope.row.frontMenuName}}
                </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20]"
                :page-size="100"
                layout=" prev, pager, next, total, sizes,jumper"
                :total="total">
                </el-pagination>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name:"MenuManager",
    data(){
        return{
            queryForm:{
                frontMenuId:"",
                current:1,
                size:10
            },
            tableData:[],
            total:0,
            originMenu:[],
        }
    },
    watch:{
        'queryForm.frontMenuId':{
            handler(){ 
                this.queryForm.current = 1;
            }
        }
    },
    methods:{
        query(){
            // console.log(this.queryForm)
            this.$http.post("/lc/getMenusWithDTO",this.queryForm).then(res => {
                this.tableData = res.data.data
                this.total = res.data.total
            }).catch(err => {
              console.error("Error querying menus:", err);
              this.$message.error("查询菜单失败: " + err.message);
            })
        },
        getOriginMenu(){
            this.$http.get("/lc/getOriginMenus").then(res => {
                this.originMenu = res.data;
            }).catch(err => {
              console.error("Error getting origin menus:", err);
              this.$message.error("获取原始菜单失败: " + err.message);
            })
        },
        handleSizeChange(val){
            this.queryForm.size = val;
            this.query()
        },
        handleCurrentChange(val){
            this.queryForm.current = val;
            this.query()
        },
        addMenu(){
            this.$router.push({
                path: '/addorEditMenu',
                query:{
                    originMenu:this.originMenu
                }
            })
        },
        handleEdit(index, row){
            // console.log(row)
            let roleIds = [];
            this.$http.get("/lc/getRoleWithMenuId?menuId="+row.menuId).then(res => {
                // console.log(res.data)
                res.data.forEach(role => {
                    roleIds.push(role.roleId)
                });
                
                this.$router.push({
                    path: '/addorEditMenu',
                    query:{
                        menuInfo:row,
                        originMenu:this.originMenu,
                        bondRoles:roleIds
                    }
                })
            }).catch(err => {
              console.error("Error getting roles with menu ID:", err);
              this.$message.error("获取菜单角色信息失败: " + err.message);
            })
            
        },
        handleDelete(index, row){
            this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //判断该菜单下是否有子菜单
                this.$http.get("/lc/getSubMenu?menuId="+row.menuId).then(res => {
                    if (res.data.length == 0){
                        this.$http.post("/lc/delMenu?menuId=" + row.menuId).then(res => {
                            if (res.data == "success"){
                                this.$message.success("删除成功")
                                this.query()
                            } else {
                                this.$message.error("删除失败")
                            }
                        }).catch(err => {
                          console.error("Error deleting menu:", err);
                          this.$message.error("删除菜单失败: " + err.message);
                        })
                    } else {
                        this.$message.warning("该菜单下存在子菜单，请先删除子菜单")
                    }
                }).catch(e => {
                    console.log('删除失败')
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })
        }
    },
    mounted(){
        if (this.$route.query.msg != null){
            this.$message.success(this.$route.query.msg)
        }
        this.query()
        this.getOriginMenu()
    }
}
</script>

<style>

</style>